<template>
  <section id="solutions" class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">为不同角色打造的专属功能</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">我们理解不同角色的需求差异，提供针对性的功能体验</p>
      </div>

      <!-- 角色选择标签 -->
      <div class="flex justify-center mb-10">
        <div class="inline-flex bg-gray-200 rounded-full p-1">
          <button 
            class="px-6 py-2 rounded-full font-medium transition-all"
            :class="activeRole === 'therapist' ? 'bg-white text-blue-700 shadow-md' : 'text-gray-600 hover:text-gray-900'"
            @click="activeRole = 'therapist'"
          >
            致康复师
          </button>
          <button 
            class="px-6 py-2 rounded-full font-medium transition-all"
            :class="activeRole === 'parent' ? 'bg-white text-purple-700 shadow-md' : 'text-gray-600 hover:text-gray-900'"
            @click="activeRole = 'parent'"
          >
            致家长
          </button>
        </div>
      </div>

      <!-- 康复师功能展示 -->
      <div v-if="activeRole === 'therapist'" class="space-y-12">
        <h3 class="text-2xl font-bold text-center text-blue-700 mb-8">告别繁琐，拥抱精准</h3>
        
        <div class="grid md:grid-cols-3 gap-8">
          <!-- 学生管理仪表盘 -->
          <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/0/600/400" alt="学生管理仪表盘界面，展示宏观监控和风险预警功能" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
            </div>
            <div class="p-6">
              <h4 class="text-xl font-bold mb-3 text-blue-700">学生管理仪表盘</h4>
              <p class="text-gray-600">宏观监控所有学生状态，智能风险预警，让您随时掌握每个孩子的康复进度。</p>
            </div>
          </div>
          
          <!-- 个体化数据分析中心 -->
          <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/180/600/400" alt="社交能力雷达图，展示个体化数据分析功能" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
            </div>
            <div class="p-6">
              <h4 class="text-xl font-bold mb-3 text-blue-700">个体化数据分析中心</h4>
              <p class="text-gray-600">通过社交能力雷达图等多种可视化方式，快速定位短板，洞察孩子的思维模式。</p>
            </div>
          </div>
          
          <!-- IEP教学计划系统 -->
          <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/160/600/400" alt="IEP教学计划系统界面，展示任务打包和指派功能" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
            </div>
            <div class="p-6">
              <h4 class="text-xl font-bold mb-3 text-blue-700">IEP教学计划系统</h4>
              <p class="text-gray-600">标准化与个性化完美结合，支持任务打包和一键指派，大幅提升工作效率。</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 家长功能展示 -->
      <div v-if="activeRole === 'parent'" class="space-y-12">
        <h3 class="text-2xl font-bold text-center text-purple-700 mb-8">不再孤单，见证成长</h3>
        
        <div class="grid md:grid-cols-3 gap-8">
          <!-- 成长看板 -->
          <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/20/600/400" alt="孩子成长看板，展示成就墙和能力成长曲线" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
            </div>
            <div class="p-6">
              <h4 class="text-xl font-bold mb-3 text-purple-700">成长看板</h4>
              <p class="text-gray-600">通过成就墙和能力成长曲线，直观展示孩子的每一步进步，增强康复信心。</p>
            </div>
          </div>
          
          <!-- 任务清单与作业模块 -->
          <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/119/600/400" alt="任务清单与作业模块手机界面，展示便捷的视频上传流程" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
            </div>
            <div class="p-6">
              <h4 class="text-xl font-bold mb-3 text-purple-700">任务清单与作业模块</h4>
              <p class="text-gray-600">简洁明了的任务界面，配合便捷的视频上传流程，让家庭训练轻松上手。</p>
            </div>
          </div>
          
          <!-- 家长学院与互助社区 -->
          <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/26/600/400" alt="家长学院与互助社区界面，展示文章列表和社区讨论" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
            </div>
            <div class="p-6">
              <h4 class="text-xl font-bold mb-3 text-purple-700">家长学院与互助社区</h4>
              <p class="text-gray-600">提供专业知识与情感支持，让您在康复之路上不再孤单，与其他家长共同成长。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue';

// 角色选择状态
const activeRole = ref('therapist');
</script>
